<template>
  <div v-if="$store.getters.headFlag">
    <div>
      <div class="head_wrap">
        <h2 style="cursor:pointer;"
            @click="$router.push('/home')">积云学院</h2>
        <ul>
          <li>在线客服</li>
          <li>常见问题</li>
          <li @click="safeFlag=true">安全中心</li>
          <li @click="quit">退出</li>
          <li>
            <span>{{$store.state.userInfo.turename}}</span>
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1757702845,51708014&fm=26&gp=0.jpg"
                 alt="">
          </li>
        </ul>
      </div>
    </div>
    <!-- 蓝色导航部分 -->
    <div>
      <div class="nav"
           id="nav">
        <ul>
          <li>
            <div class="navName">
              <i class="icon icon-user"></i>
              <span>用户管理</span>
            </div>
            <div class="navItem navItem1">
              <div class="Item">
                <a href="/admin">
                  <i class="icon icon-user"></i>
                  <span>系统人员</span>
                </a>
              </div>
              <div class="Item">
                <a href="/student">
                  <i class="icon icon-user"></i>
                  <span>学员管理</span>
                </a>
              </div>
            </div>
          </li>
          <li>
            <div class="navName">
              <i class="icon icon-user"></i>
              <span>课程管理</span>
            </div>
            <div class="navItem navItem1">
              <div class="Item">
                <a href="/course">
                  <i class="icon icon-user"></i>
                  <span>课程管理</span>
                </a>
              </div>
              <div class="Item">
                <a href="/courseAdd">
                  <i class="icon icon-user"></i>
                  <span>课程编辑</span>
                </a>
              </div>
              <div class="Item">
                <a href="/video">
                  <i class="icon icon-user"></i>
                  <span>视频管理</span>
                </a>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <safe-alert :dialogVisible="safeFlag"
                @send="getFlag"></safe-alert>
  </div>
</template>
<script>
import { quitLogin } from '../api/common'
import safeAlert from './safeAlert'
export default {
  name: "headcom",
  data () {
    return {
      safeFlag: false,//控制遮罩的显示隐藏
      userInfo: {}//用户信息
    }
  },
  created () {

  },
  methods: {
    async quit () { //退出登录
      var res = await quitLogin()
      if (res.success) {
        this.$alert("退出成功")
        this.$router.push("/login")
      }
    },
    getFlag (flag) {
      this.safeFlag = flag;
    }
  },
  components: {
    safeAlert
  }
}
</script>
<style lang="less" scoped>
.head_wrap {
  width: 100%;
  background: black;
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  box-sizing: border-box;
  line-height: 50px;
  color: white;
  ul {
    display: flex;
    height: 50px;
    line-height: 50px;
    color: gray;
    li {
      margin-right: 20px;
      cursor: pointer;
      &:hover {
        color: white;
      }
    }
    img {
      width: 40px;
      height: 45px;
      vertical-align: middle;
      margin-left: 10px;
    }
  }
}
.nav {
  width: 100%;
  height: 50px;
  background: skyblue;
  position: relative;
}

.nav ul {
  /*padding-left: 500px;*/
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
}

.nav ul li .navName {
  font-size: 16px;
  float: left;
  padding: 0 30px;
  color: whitesmoke;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  position: relative;
}

.nav ul li .navName i {
  margin-right: 10px;
}

/*  上下白   设置基本属性  用css 伪类 设置*/
.nav ul li .navName::before,
.nav ul li .navName::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  transition: 0.3s ease;
  opacity: 0;
}

/* 设置位置 颜色 */
.nav ul li .navName::before {
  top: 20px;
  left: 66px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}

.nav ul li .navName::after {
  bottom: 20px;
  right: 66px;
  border-bottom: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}

/*白色的那个条*/
.nav .navItem {
  position: absolute;
  z-index: 200;
  /*left: -80px;*/
  top: 50px;
  width: 100%;
  height: 144px;
  background-color: white;
  border: 1px solid #ececec;
  display: none;
}

/* 白条中内容 */
.nav .navItem .Item {
  float: left;
  margin: 52px 40px;
  width: 249px;
  height: 40px;
  border: 1px solid #ececec;
  font-size: 15px;
  line-height: 42px;
  text-align: center;
  cursor: pointer;
  transition: 0.2s ease;
}

.nav .navItem .Item:hover {
  background: #4c5c9c;
  color: white;
  font-size: 16px;
}

.nav .navItem .Item i {
  margin-right: 13px;
}

/*控制显示的移入*/
.nav ul li:hover > .navItem {
  display: block;
}

/* 鼠标移入时 显示的 上下白 */
.nav ul li:hover > .navName::before {
  top: 2px;
  left: 2px;
  opacity: 1;
  /*transition: .3s ease;*/
}

.nav ul li:hover > .navName::after {
  bottom: 2px;
  right: 2px;
  opacity: 1;
  /*transition: .3s ease;*/
}
</style>